<template>
  <div class="comment_input">
    <n-input
      v-model:value="commentVlaue"
      placeholder=""
      type="textarea"
      size="small"
      :autofocus="true"
      :autosize="{
        minRows: 1,
        maxRows: 6
      }"
    >
    </n-input>
    <V3Emoji
      style="width: 40px;margin-left: 10px;"
      :recent="true"
      :theme="osThemeDark?'dark':''"
      :fulldata="true"
      @click-emoji="appendText"
      fix-pos="downcenter"
      >
      <n-button quaternary size="small">
        <template #icon>
          <n-icon :component="HappyOutline"></n-icon>
        </template>
      </n-button>
    </V3Emoji>
    <n-button type="primary" size="small" style="margin-left: 10px;" @click="reply">
      回复
    </n-button>
  </div>
</template>

<script setup lang='ts'>
import V3Emoji from "vue3-emoji"
import { HappyOutline } from '@vicons/ionicons5'
import {ref,onMounted, watch} from "vue"
import { useStore } from "../store"
const store = useStore()
const osThemeDark = ref(true)
const commentVlaue = ref("")

const props = defineProps<{
  target: object
}>()

const emits = defineEmits<{
  reply: [commentData:object]
}>()

// 选择表情
const appendText = (value:any) => {
  commentVlaue.value = commentVlaue.value + value.emoji
}

// 回复
const reply = () => {
  const commentData = {
    username: localStorage.getItem("username"),
    phone: localStorage.getItem("token"),
    content: commentVlaue.value,
    target: props.target
  }
  emits("reply", commentData)
}

onMounted(() => {
  osThemeDark.value = localStorage.getItem("osTheme")=="dark"?true:false
})

watch(() => store.osTheme, (newValue) => {
  osThemeDark.value = newValue=="dark"?true:false
})

</script>

<style lang='scss' scoped>
  
</style>